<template>
  <div @click="showCityBox = !showCityBox" class="city-weather">
    <div class="city-name-box" :class="{ 'city-name-box-active': showCityBox }">
      {{ cityName }}
      <i
        class="iconfont icon-caret-up"
        :class="{ 'rotate-180': showCityBox }"
      ></i>
    </div>
  </div>
  <div :class="currentZoom >= 8.9 ? 'weather-active' : ''" class="weather-box">
    <div>{{ dayWeather }}</div>
    <div>{{ nightWeather }}/{{ dayTemp }}℃</div>
  </div>

  <!-- 城市选择的下拉框 -->
  <div v-show="showCityBox" class="searchCity-event">
    <div class="box-header">当前城市：{{ cityName }}</div>
    <div class="box-body">
      <div class="remen-citys">
        <div
          class="remen-city"
          v-for="item in remenCitys"
          @click="flyToCity(item)"
        >
          {{ item }}
        </div>
      </div>
      <div class="filter-input">
        <div class="filter-change-button">
          <div
            :class="filterStatus ? 'filter-active' : ''"
            @click="filterStatus = true"
          >
            按省份
          </div>
          <div
            :class="!filterStatus ? 'filter-active' : ''"
            @click="filterStatus = false"
          >
            按城市
          </div>
        </div>
        <el-input
          style="width: 200px; height: 24px; font-size: 12px"
          placeholder="请输入城市"
          :prefix-icon="Search"
        />
      </div>
      <div class="letter-26">
        <div v-show="filterStatus" class="letter-item" v-for="item in letter13">
          {{ item }}
        </div>
        <div
          v-show="!filterStatus"
          class="letter-item"
          v-for="item in letter26"
        >
          {{ item }}
        </div>
      </div>
      <div class="filter-province" v-show="filterStatus">
        <div class="province-item" v-for="item in cityList">
          <div class="province-name">{{ item.province }}:</div>
          <div class="city-list">
            <div
              class="city-item"
              v-for="city in item.city"
              @click="flyToCity(city)"
            >
              {{ city }}
            </div>
          </div>
        </div>
      </div>
      <div class="filter-province" v-show="!filterStatus">
        <div class="province-item" v-for="item in cityLetter">
          <div class="province-name">{{ item.letter }}:</div>
          <div class="city-list">
            <div
              class="city-item"
              v-for="city in item.citys"
              @click="flyToCity(city)"
            >
              {{ city }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'

const props = defineProps({
  mapInstance: {
    type: Object,
    required: true,
  },
})
const map = ref(null)
const AMap = ref(null)

const cityName = ref('广州')
const citySearch = ref(null)

//当前的zoom级别
const currentZoom = ref(9)
const currentCenter = ref([])

//查询天气实例
const searchCityWeather = ref(null)
const dayWeather = ref(null)
const dayTemp = ref(null)
const nightWeather = ref(null)

//切换筛选状态
const filterStatus = ref(true)
const showCityBox = ref(false)

//查询行政区图层
const districtSearchProvince_city = ref(null)
const districtSearchCounty = ref(null)
const districtSearchProvince = ref(null)

//逆地理编码  根据中心点获取地理信息
const geocoderLayer = ref(null)
const geocoderLayer_result = ref(null) //地理信息

//热门城市
const remenCitys = ref([
  '全国',
  '北京',
  '天津',
  '沈阳',
  '大连',
  '上海',
  '南京',
  '苏州',
  '杭州',
  '青岛',
  '郑州',
  '武汉',
  '长沙',
  '广州',
  '深圳',
  '重庆',
  '成都',
  '西安',
  '香港',
  '澳门',
])

//输入框的26个字符按钮
const letter26 = ref([
  'A',
  'B',
  'C',
  'D',
  'E',
  'F',
  'G',
  'H',
  'I',
  'J',
  'K',
  'L',
  'M',
  'N',
  'O',
  'P',
  'Q',
  'R',
  'S',
  'T',
  'U',
  'V',
  'W',
  'X',
  'Y',
  'Z',
])

//输入框省份首字符
const letter13 = ref([
  'A',
  'F',
  'G',
  'H',
  'J',
  'N',
  'Q',
  'S',
  'T',
  'X',
  'Y',
  'Z',
])

//输入框首字母城市列表
const cityLetter = ref([
  {
    letter: 'A',
    citys: [
      '阿拉善盟',
      '鞍山',
      '安庆',
      '安阳',
      '安康',
      '阿克苏地区',
      '阿勒泰地区',
      '安顺',
      '阿里地区',
      '阿坝藏族羌族自治州',
      '阿拉尔',
    ],
  },
  {
    letter: 'B',
    citys: [
      '北京',
      '包头',
      '巴彦淖尔',
      '保定',
      '本溪',
      '白城',
      '白山',
      '蚌埠',
      '亳州',
      '滨州',
      '北海',
      '百色',
      '毕节',
      '保山',
      '宝鸡',
      '白银',
      '巴中',
      '巴音郭楞蒙古自治州',
      '博尔塔拉蒙古自治州',
    ],
  },
  {
    letter: 'C',
    citys: [
      '重庆',
      '成都',
      '长沙',
      '长春',
      '常州',
      '沧州',
      '承德',
      '长治',
      '赤峰',
      '朝阳',
      '常德',
      '郴州',
      '潮州',
      '崇左',
      '滁州',
      '池州',
      '楚雄彝族自治州',
      '昌都',
      '昌吉回族自治州',
      '澄迈县',
      '昌江黎族自治县',
    ],
  },
  {
    letter: 'D',
    citys: [
      '大连',
      '东莞',
      '大庆',
      '大同',
      '丹东',
      '大兴安岭地区',
      '东营',
      '德州',
      '大理白族自治州',
      '德宏傣族景颇族自治州',
      '迪庆藏族自治州',
      '定安县',
      '东方',
      '儋州',
      '达州',
      '德阳',
      '定西',
    ],
  },
  {
    letter: 'E',
    citys: ['鄂尔多斯', '鄂州', '恩施土家族苗族自治州'],
  },
  {
    letter: 'F',
    citys: [
      '福州',
      '佛山',
      '抚顺',
      '阜新',
      '阜阳',
      '抚州',
      '防城港',
      '福清',
      '凤城',
      '丰都县',
      '奉节县',
    ],
  },
  {
    letter: 'G',
    citys: [
      '广州',
      '桂林',
      '贵阳',
      '赣州',
      '广元',
      '广安',
      '贵港',
      '固原',
      '甘南藏族自治州',
      '甘孜藏族自治州',
      '果洛藏族自治州',
      '高雄',
      '格尔木',
      '巩义',
    ],
  },
  {
    letter: 'H',
    citys: [
      '杭州',
      '哈尔滨',
      '合肥',
      '海口',
      '呼和浩特',
      '邯郸',
      '衡水',
      '葫芦岛',
      '湖州',
      '淮安',
      '黄山',
      '菏泽',
      '黄石',
      '怀化',
      '惠州',
      '河源',
      '贺州',
      '河池',
      '红河哈尼族彝族自治州',
      '海东',
      '海北藏族自治州',
      '海南藏族自治州',
      '海西蒙古族藏族自治州',
      '哈密',
      '和田地区',
      '鹤壁',
      '鹤岗',
      '黑河',
      '衡阳',
      '黄冈',
      '呼伦贝尔',
    ],
  },
  {
    letter: 'J',
    citys: [
      '济南',
      '吉林',
      '嘉兴',
      '金华',
      '九江',
      '景德镇',
      '吉安',
      '济宁',
      '焦作',
      '荆州',
      '荆门',
      '江门',
      '揭阳',
      '酒泉',
      '金昌',
      '嘉峪关',
      '晋城',
      '晋中',
      '锦州',
      '佳木斯',
      '鸡西',
      '牡丹江',
      '张家界',
      '驻马店',
      '周口',
    ],
  },
  {
    letter: 'K',
    citys: [
      '昆明',
      '开封',
      '克拉玛依',
      '喀什地区',
      '克孜勒苏柯尔克孜自治州',
      '昆玉',
      '可克达拉',
    ],
  },
  {
    letter: 'L',
    citys: [
      '兰州',
      '拉萨',
      '洛阳',
      '连云港',
      '丽水',
      '六安',
      '龙岩',
      '临沂',
      '聊城',
      '漯河',
      '娄底',
      '柳州',
      '来宾',
      '乐山',
      '凉山彝族自治州',
      '丽江',
      '临沧',
      '林芝',
      '陇南',
      '临夏回族自治州',
      '辽源',
      '辽阳',
      '吕梁',
    ],
  },
  {
    letter: 'M',
    citys: [
      '马鞍山',
      '茂名',
      '梅州',
      '绵阳',
      '眉山',
      '牡丹江',
      '密山',
      '满洲里',
    ],
  },
  {
    letter: 'N',
    citys: [
      '南京',
      '宁波',
      '南宁',
      '南昌',
      '南通',
      '南阳',
      '宁德',
      '南平',
      '内江',
      '南充',
      '怒江傈僳族自治州',
      '那曲',
      '南沙',
      '宁河区',
    ],
  },
  {
    letter: 'P',
    citys: [
      '平顶山',
      '盘锦',
      '莆田',
      '萍乡',
      '攀枝花',
      '普洱',
      '平凉',
      '濮阳',
      '普宁',
    ],
  },
  {
    letter: 'Q',
    citys: [
      '青岛',
      '泉州',
      '秦皇岛',
      '齐齐哈尔',
      '衢州',
      '曲靖',
      '清远',
      '钦州',
      '黔东南苗族侗族自治州',
      '黔南布依族苗族自治州',
      '黔西南布依族苗族自治州',
      '庆阳',
      '七台河',
      '潜江',
    ],
  },
  {
    letter: 'R',
    citys: ['日照', '日喀则', '瑞金'],
  },
  {
    letter: 'S',
    citys: [
      '上海',
      '深圳',
      '苏州',
      '沈阳',
      '石家庄',
      '绍兴',
      '宿迁',
      '宿州',
      '三明',
      '上饶',
      '十堰',
      '随州',
      '邵阳',
      '韶关',
      '汕尾',
      '三亚',
      '遂宁',
      '山南',
      '商洛',
      '石嘴山',
      '双鸭山',
      '绥化',
      '四平',
      '松原',
      '三门峡',
    ],
  },
  {
    letter: 'T',
    citys: [
      '天津',
      '太原',
      '唐山',
      '台州',
      '泰州',
      '泰安',
      '铜陵',
      '铁岭',
      '通辽',
      '通化',
      '天水',
      '铜仁',
      '吐鲁番',
      '塔城地区',
      '图木舒克',
    ],
  },
  {
    letter: 'W',
    citys: [
      '武汉',
      '无锡',
      '温州',
      '乌鲁木齐',
      '芜湖',
      '潍坊',
      '威海',
      '梧州',
      '文山壮族苗族自治州',
      '武威',
      '吴忠',
      '渭南',
      '乌海',
      '五指山',
      '万宁',
      '文昌',
    ],
  },
  {
    letter: 'X',
    citys: [
      '西安',
      '厦门',
      '徐州',
      '西宁',
      '襄阳',
      '湘潭',
      '新乡',
      '许昌',
      '信阳',
      '宣城',
      '新余',
      '忻州',
      '邢台',
      '咸宁',
      '孝感',
      '湘西土家族苗族自治州',
      '西双版纳傣族自治州',
      '锡林郭勒盟',
      '兴安盟',
      '香港',
      '仙桃',
      '西昌',
    ],
  },
  {
    letter: 'Y',
    citys: [
      '银川',
      '烟台',
      '扬州',
      '盐城',
      '宜昌',
      '岳阳',
      '永州',
      '宜春',
      '鹰潭',
      '运城',
      '阳泉',
      '榆林',
      '延安',
      '玉林',
      '云浮',
      '宜宾',
      '雅安',
      '玉树藏族自治州',
      '伊犁哈萨克自治州',
      '延边朝鲜族自治州',
      '营口',
      '阳江',
      '伊春',
    ],
  },
  {
    letter: 'Z',
    citys: [
      '郑州',
      '珠海',
      '漳州',
      '镇江',
      '湛江',
      '肇庆',
      '中山',
      '遵义',
      '自贡',
      '资阳',
      '张家界',
      '张掖',
      '中卫',
      '周口',
      '驻马店',
      '株洲',
      '枣庄',
      '张家口',
      '舟山',
      '昭通',
    ],
  },
])

//按照省份筛选的城市列表
const cityList = ref([
  {
    province: '安徽',
    city: [
      '合肥',
      '芜湖',
      '蚌埠',
      '淮南',
      '马鞍山',
      '淮北',
      '铜陵',
      '安庆',
      '黄山',
      '滁州',
      '阜阳',
      '宿州',
      '六安',
      '亳州',
      '池州',
      '宣城',
    ],
  },
  {
    province: '福建',
    city: [
      '福州',
      '厦门',
      '莆田',
      '三明',
      '泉州',
      '漳州',
      '南平',
      '龙岩',
      '宁德',
    ],
  },
  {
    province: '甘肃',
    city: [
      '兰州',
      '嘉峪关',
      '金昌',
      '白银',
      '天水',
      '武威',
      '张掖',
      '平凉',
      '酒泉',
      '庆阳',
      '定西',
      '陇南',
      '临夏回族自治州',
      '甘南藏族自治州',
    ],
  },
  {
    province: '广东',
    city: [
      '广州',
      '韶关',
      '深圳',
      '珠海',
      '汕头',
      '佛山',
      '江门',
      '湛江',
      '茂名',
      '肇庆',
      '惠州',
      '梅州',
      '汕尾',
      '河源',
      '阳江',
      '清远',
      '东莞',
      '中山',
      '潮州',
      '揭阳',
      '云浮',
    ],
  },
  {
    province: '广西',
    city: [
      '南宁',
      '柳州',
      '桂林',
      '梧州',
      '北海',
      '防城港',
      '钦州',
      '贵港',
      '玉林',
      '百色',
      '贺州',
      '河池',
      '来宾',
      '崇左',
    ],
  },
  {
    province: '贵州',
    city: [
      '贵阳',
      '六盘水',
      '遵义',
      '安顺',
      '毕节',
      '铜仁',
      '黔西南布依族苗族自治州',
      '黔东南苗族侗族自治州',
      '黔南布依族苗族自治州',
    ],
  },
  {
    province: '海南',
    city: [
      '海口',
      '三亚',
      '三沙',
      '儋州',
      '五指山',
      '琼海',
      '文昌',
      '万宁',
      '东方',
      '定安县',
      '屯昌县',
      '澄迈县',
      '临高县',
      '白沙黎族自治县',
      '昌江黎族自治县',
      '乐东黎族自治县',
      '陵水黎族自治县',
      '保亭黎族苗族自治县',
      '琼中黎族苗族自治县',
    ],
  },
  {
    province: '河北',
    city: [
      '石家庄',
      '唐山',
      '秦皇岛',
      '邯郸',
      '邢台',
      '保定',
      '张家口',
      '承德',
      '沧州',
      '廊坊',
      '衡水',
    ],
  },
  {
    province: '河南',
    city: [
      '郑州',
      '开封',
      '洛阳',
      '平顶山',
      '安阳',
      '鹤壁',
      '新乡',
      '焦作',
      '濮阳',
      '许昌',
      '漯河',
      '三门峡',
      '南阳',
      '商丘',
      '信阳',
      '周口',
      '驻马店',
      '济源',
    ],
  },
  {
    province: '黑龙江',
    city: [
      '哈尔滨',
      '齐齐哈尔',
      '鸡西',
      '鹤岗',
      '双鸭山',
      '大庆',
      '伊春',
      '佳木斯',
      '七台河',
      '牡丹江',
      '黑河',
      '绥化',
      '大兴安岭地区',
    ],
  },
  {
    province: '湖北',
    city: [
      '武汉',
      '黄石',
      '十堰',
      '宜昌',
      '襄阳',
      '鄂州',
      '荆门',
      '孝感',
      '荆州',
      '黄冈',
      '咸宁',
      '随州',
      '恩施土家族苗族自治州',
      '仙桃',
      '潜江',
      '天门',
      '神农架林区',
    ],
  },
  {
    province: '湖南',
    city: [
      '长沙',
      '株洲',
      '湘潭',
      '衡阳',
      '邵阳',
      '岳阳',
      '常德',
      '张家界',
      '益阳',
      '郴州',
      '永州',
      '怀化',
      '娄底',
      '湘西土家族苗族自治州',
    ],
  },
  {
    province: '吉林',
    city: [
      '长春',
      '吉林',
      '四平',
      '辽源',
      '通化',
      '白山',
      '松原',
      '白城',
      '延边朝鲜族自治州',
    ],
  },
  {
    province: '江苏',
    city: [
      '南京',
      '无锡',
      '徐州',
      '常州',
      '苏州',
      '南通',
      '连云港',
      '淮安',
      '盐城',
      '扬州',
      '镇江',
      '泰州',
      '宿迁',
    ],
  },
  {
    province: '江西',
    city: [
      '南昌',
      '景德镇',
      '萍乡',
      '九江',
      '新余',
      '鹰潭',
      '赣州',
      '吉安',
      '宜春',
      '抚州',
      '上饶',
    ],
  },
  {
    province: '辽宁',
    city: [
      '沈阳',
      '大连',
      '鞍山',
      '抚顺',
      '本溪',
      '丹东',
      '锦州',
      '营口',
      '阜新',
      '辽阳',
      '盘锦',
      '铁岭',
      '朝阳',
      '葫芦岛',
    ],
  },
  {
    province: '内蒙古',
    city: [
      '呼和浩特',
      '包头',
      '乌海',
      '赤峰',
      '通辽',
      '鄂尔多斯',
      '呼伦贝尔',
      '巴彦淖尔',
      '乌兰察布',
      '兴安盟',
      '锡林郭勒盟',
      '阿拉善盟',
    ],
  },
  { province: '宁夏', city: ['银川', '石嘴山', '吴忠', '固原', '中卫'] },
  {
    province: '青海',
    city: [
      '西宁',
      '海东',
      '海北藏族自治州',
      '黄南藏族自治州',
      '海南藏族自治州',
      '果洛藏族自治州',
      '玉树藏族自治州',
      '海西蒙古族藏族自治州',
    ],
  },
  {
    province: '山东',
    city: [
      '济南',
      '青岛',
      '淄博',
      '枣庄',
      '东营',
      '烟台',
      '潍坊',
      '济宁',
      '泰安',
      '威海',
      '日照',
      '临沂',
      '德州',
      '聊城',
      '滨州',
      '菏泽',
    ],
  },
  {
    province: '山西',
    city: [
      '太原',
      '大同',
      '阳泉',
      '长治',
      '晋城',
      '朔州',
      '晋中',
      '运城',
      '忻州',
      '临汾',
      '吕梁',
    ],
  },
  {
    province: '陕西',
    city: [
      '西安',
      '铜川',
      '宝鸡',
      '咸阳',
      '渭南',
      '延安',
      '汉中',
      '榆林',
      '安康',
      '商洛',
    ],
  },
  {
    province: '四川',
    city: [
      '成都',
      '自贡',
      '攀枝花',
      '泸州',
      '德阳',
      '绵阳',
      '广元',
      '遂宁',
      '内江',
      '乐山',
      '南充',
      '眉山',
      '宜宾',
      '广安',
      '达州',
      '雅安',
      '巴中',
      '资阳',
      '阿坝藏族羌族自治州',
      '甘孜藏族自治州',
      '凉山彝族自治州',
    ],
  },
  {
    province: '天津',
    city: [
      '和平区',
      '河东区',
      '河西区',
      '南开区',
      '河北区',
      '红桥区',
      '东丽区',
      '西青区',
      '津南区',
      '北辰区',
      '武清区',
      '宝坻区',
      '滨海新区',
      '宁河区',
      '静海区',
      '蓟州区',
    ],
  },
  {
    province: '西藏',
    city: ['拉萨', '日喀则', '昌都', '林芝', '山南', '那曲', '阿里地区'],
  },
  {
    province: '新疆',
    city: [
      '乌鲁木齐',
      '克拉玛依',
      '吐鲁番',
      '哈密',
      '昌吉回族自治州',
      '博尔塔拉蒙古自治州',
      '巴音郭楞蒙古自治州',
      '阿克苏地区',
      '克孜勒苏柯尔克孜自治州',
      '喀什地区',
      '和田地区',
      '伊犁哈萨克自治州',
      '塔城地区',
      '阿勒泰地区',
      '石河子',
      '阿拉尔',
      '图木舒克',
      '五家渠',
      '北屯',
      '铁门关',
      '双河',
      '可克达拉',
      '昆玉',
      '胡杨河',
    ],
  },
  {
    province: '云南',
    city: [
      '昆明',
      '曲靖',
      '玉溪',
      '保山',
      '昭通',
      '丽江',
      '普洱',
      '临沧',
      '楚雄彝族自治州',
      '红河哈尼族彝族自治州',
      '文山壮族苗族自治州',
      '西双版纳傣族自治州',
      '大理白族自治州',
      '德宏傣族景颇族自治州',
      '怒江傈僳族自治州',
      '迪庆藏族自治州',
    ],
  },
  {
    province: '浙江',
    city: [
      '杭州',
      '宁波',
      '温州',
      '嘉兴',
      '湖州',
      '绍兴',
      '金华',
      '衢州',
      '舟山',
      '台州',
      '丽水',
    ],
  },
])
const emit = defineEmits(['updateCityName'])

//事件函数区域
const flyToCity = (city) => {
  cityName.value = city
  if (city === '全国') {
    //根据城市名称获取城市经纬度
    districtSearchCounty.value.search('中国', function () {
      // console.log(status, result)
      currentCenter.value = [108.5525, 34.3227]
      map.value.setZoomAndCenter(4, currentCenter.value, false, 500)
    })
  } else {
    //根据城市名称获取城市经纬度
    districtSearchProvince_city.value.search(
      cityName.value,
      function (status, result) {
        // console.log(status, result)
        currentCenter.value = [
          result.districtList[0].center.lng,
          result.districtList[0].center.lat,
        ]
        map.value.setZoomAndCenter(12, currentCenter.value, false, 500)
      }
    )
  }
  showCityBox.value = false
}

//监听地图实例的变化，传递参数给该组件
watch(
  () => props.mapInstance,
  (newVal) => {
    if (newVal && newVal.map && newVal.AMap) {
      map.value = newVal.map
      AMap.value = newVal.AMap

      //获取当前的zoom级别
      map.value.on('zoomchange', () => {
        currentZoom.value = map.value.getZoom()
      })

      //动态发送请求获取天气数据
      if (currentZoom.value >= 10) {
        //创建天气查询实例
        searchCityWeather.value = new AMap.value.Weather()
        searchCityWeather.value.getLive(cityName.value, function (err, data) {
          dayWeather.value = data.weather
          //console.log('dayWeather', dayWeather.value)
        })
        //执行实时天气信息查询
        searchCityWeather.value.getForecast(
          cityName.value,
          function (err, data) {
            dayTemp.value = data.forecasts[0].dayTemp
            nightWeather.value = data.forecasts[0].nightTemp
            //console.log('dayTemp', dayTemp.value)
            // console.log('nightWeather', nightWeather.value)
          }
        )
      } else {
        //清空天气查询实例
        searchCityWeather.value = null
        dayWeather.value = null
        dayTemp.value = null
        nightWeather.value = null
      }

      //创建天气查询实例
      searchCityWeather.value = new AMap.value.Weather()
      searchCityWeather.value.getLive(cityName.value, function (err, data) {
        dayWeather.value = data.weather
        //console.log('dayWeather', dayWeather.value)
      })
      //执行实时天气信息查询
      searchCityWeather.value.getForecast(cityName.value, function (err, data) {
        dayTemp.value = data.forecasts[0].dayTemp
        nightWeather.value = data.forecasts[0].nightTemp
        //console.log('dayTemp', dayTemp.value)
        // console.log('nightWeather', nightWeather.value)
      })

      //获取当前的中心点
      map.value.on('moveend', () => {
        currentCenter.value = [
          map.value.getCenter().lng,
          map.value.getCenter().lat,
        ]
        //  console.log('currentCenter', currentCenter.value)
      })
      currentCenter.value = [
        map.value.getCenter().lng,
        map.value.getCenter().lat,
      ]

      //根据ip地址获取当前所在的城市       【ip设置有问题，后续完善补充】
      // AMap.value.plugin('AMap.CitySearch', function () {
      //   citySearch.value = new AMap.value.CitySearch()
      //   citySearch.value.getLocalCity(function (status, result) {
      //     console.log('noif,result', result)
      //     console.log('noif,status', status)

      //     if (status === 'complete' && result.info === 'OK') {
      //       // 查询成功，result即为当前所在城市信息
      //       console.log('if', result)
      //     }
      //   })
      // })

      // 查询行政区  省份下的城市
      districtSearchProvince_city.value = new AMap.value.DistrictSearch({
        level: 'province',
        subdistrict: 1, //显示下级行政区级数，1表示返回下一级行政区
        extensions: 'all', //返回行政区边界坐标组等具体信息
      })
      // 查询行政区  全国
      districtSearchCounty.value = new AMap.value.DistrictSearch({
        level: 'country',
        subdistrict: 0, //显示下级行政区级数，1表示返回下一级行政区
        extensions: 'all', //返回行政区边界坐标组等具体信息
      })
      // 查询行政区  省份
      districtSearchProvince.value = new AMap.value.DistrictSearch({
        level: 'province',
        subdistrict: 0, //显示下级行政区级数，1表示返回下一级行政区
        extensions: 'all', //返回行政区边界坐标组等具体信息
      })

      //逆地理编码 根据中心点获取地理位置  [异步引入]
      geocoderLayer.value = new AMap.value.Geocoder({
        city: '全国',
      })
    }
  },
  { immediate: true } // 立即执行一次
)

//监听中心点的变化,更改城市名称
watch(
  () => currentCenter.value,
  () => {
    geocoderLayer.value.getAddress(
      currentCenter.value,
      function (status, result) {
        if (status === 'complete' && result.info === 'OK')
          geocoderLayer_result.value = result.regeocode.addressComponent
        //  console.log('geocoderLayer_result', geocoderLayer_result.value)

        if (currentZoom.value <= 5) {
          cityName.value = '全国'
          return
        } else if (currentZoom.value >= 6 && currentZoom.value <= 8) {
          //展示省份
          cityName.value = geocoderLayer_result.value.province.slice(0, -1)
          return
        } else if (currentZoom.value >= 9) {
          //展示城市
          cityName.value = geocoderLayer_result.value.city.slice(0, -1)
          emit('updateCityName', cityName.value)
          return
        }
      }
    )
  },
  { deep: true }
)

//监听城市名称的变化,实时更改天气信息
watch(
  () => cityName.value,
  (newVal, oldVal) => {
    if (newVal !== oldVal) {
      //动态发送请求获取天气数据
      if (currentZoom.value >= 9) {
        //创建天气查询实例
        searchCityWeather.value = new AMap.value.Weather()
        searchCityWeather.value.getLive(cityName.value, function (err, data) {
          dayWeather.value = data.weather
          //console.log('dayWeather', dayWeather.value)
        })
        //执行实时天气信息查询
        searchCityWeather.value.getForecast(
          cityName.value,
          function (err, data) {
            dayTemp.value = data.forecasts[0].dayTemp
            nightWeather.value = data.forecasts[0].nightTemp
            //console.log('dayTemp', dayTemp.value)
            // console.log('nightWeather', nightWeather.value)
          }
        )
      } else {
        //清空天气查询实例
        searchCityWeather.value = null
        dayWeather.value = null
        dayTemp.value = null
        nightWeather.value = null
      }
    }
  }
)

//监听zoom的变化,实时更改天气信息
watch(
  () => currentZoom.value,
  () => {
    //动态发送请求获取天气数据
    if (currentZoom.value >= 9) {
      //创建天气查询实例
      searchCityWeather.value = new AMap.value.Weather()
      searchCityWeather.value.getLive(cityName.value, function (err, data) {
        dayWeather.value = data.weather
        //console.log('dayWeather', dayWeather.value)
      })
      //执行实时天气信息查询
      searchCityWeather.value.getForecast(cityName.value, function (err, data) {
        dayTemp.value = data.forecasts[0].dayTemp
        nightWeather.value = data.forecasts[0].nightTemp
        //console.log('dayTemp', dayTemp.value)
        // console.log('nightWeather', nightWeather.value)
      })
    } else {
      //清空天气查询实例
      searchCityWeather.value = null
      dayWeather.value = null
      dayTemp.value = null
      nightWeather.value = null
    }
  }
)

//监听城市名称的改变，实时传递参数
watch(
  () => cityName.value,
  () => {
    if (currentZoom.value >= 9) {
      emit('updateCityName', cityName.value)
    }
  }
)

onMounted(() => {
  emit('updateCityName', cityName.value)
})
</script>

<style lang="scss" scoped>
@import 'https://at.alicdn.com/t/c/font_4946857_jx8vh2h7rko.css?spm=a313x.manage_type_myprojects.i1.9.41ec3a81WdKUGA&file=font_4946857_jx8vh2h7rko.css';

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.city-weather {
  display: flex;
  align-items: center;
  position: fixed;
  top: 17px;
  left: 400px;
  width: 55px;
  height: 45px;
  padding: 5px;
  background-color: #fff;
  color: #585858;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
  z-index: 100;
  .city-name-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    &:hover {
      cursor: pointer;
    }
    .icon-caret-up {
      margin-left: 2px;
      font-size: 12px;
      transform: rotateZ(0deg) translateY(0px);
      transition: all 0.3s;
    }
    .rotate-180 {
      transform: rotateZ(180deg) translateY(-2px);
    }
  }
  .city-name-box-active {
    color: #1e88e5;
  }
}
.weather-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: fixed;
  top: 17px;
  left: 455px;
  width: 55px;
  height: 45px;
  background-color: #fff;
  font-size: 12px;
  color: #585858;
  text-align: center;
  z-index: 99;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
  transform: translateX(-100%);

  opacity: 0;
  transition: all 0.3s;
}
.weather-active {
  transform: translateX(0);
  opacity: 1;
}

//下拉框样式
.searchCity-event {
  position: fixed;
  top: 60px;
  left: 415px;
  width: 450px;
  height: 321px;
  background-color: #fff;
  padding: 6px 15px 15px;
  white-space: nowrap;
  overflow: hidden;
  zoom: 1;
  line-height: 26px;
  position: absolute;
  z-index: 9999;

  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2), 0 2px 6px 0 rgba(0, 0, 0, 0.19);
  .box-header {
    line-height: 36px;
    border-bottom: 1px solid #cbcccd;
    color: #5f6477;
    font-size: 14px;
    font-weight: 700;
  }
  .box-body {
    .remen-citys {
      display: flex;
      flex-wrap: wrap;
      margin-top: 10px;
      font-size: 12px;
      color: #1e88e5;
      div {
        margin-right: 10px;
        &:hover {
          cursor: pointer;
          text-decoration: underline;
        }
      }
    }
    .filter-input {
      display: flex;
      align-items: center;
      margin-top: 10px;
      .filter-change-button {
        display: flex;
        align-items: center;
        margin-right: 20px;
        .filter-active {
          background-color: white;
          border-bottom: none;
        }
        div {
          width: 95px;
          height: 27px;
          background-color: #f7f7f7;
          text-align: center;
          line-height: 27px;
          font-size: 12px;
          cursor: pointer;
          border-top: 1px solid #cbcccd;
          border-bottom: 1px solid #cbcccd;
        }
        div:nth-child(1) {
          border-left: 1px solid #cbcccd;
          border-right: 1px solid #cbcccd;
        }
        div:nth-child(2) {
          border-right: 1px solid #cbcccd;
        }
      }
    }
    .letter-26 {
      display: flex;
      align-items: center;
      font-size: 12px;
      margin-top: 5px;
      flex-wrap: wrap;
      color: #5f6477;
      div {
        display: inline-block;
        background-color: #f5f5f5;
        margin-left: 6px;
        line-height: 18px;
        margin-top: 5px;
        width: 18px;
        text-align: center;
        &:hover {
          cursor: pointer;
          background-color: #1e88e5;
          color: white;
        }
      }
    }
    .filter-province {
      position: relative;
      overflow: hidden;
      width: auto;
      height: 120px;
      line-height: 26px;
      margin-top: 10px;
      font-size: 12px;
      overflow-y: auto;

      .province-item {
        position: relative;
        display: flex;
        align-items: start;
        margin-bottom: 10px;
        .province-name {
          display: flex;
          align-items: start;
          flex-wrap: nowrap;
          font-weight: 700;
          color: #585858;
          margin-right: 5px;
        }
        .city-list {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          .city-item {
            color: #999;
            margin-right: 9px;
            &:hover {
              cursor: pointer;
              color: #1e88e5;
            }
          }
        }
      }
    }
  }
}
</style>
